<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edgitge" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大米</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/reset.css' %}">
    <link rel="stylesheet" href="{% static 'css/mi.css' %}">
</head>
<body>
    <!--橙色导航 start-->
    <div class="orange-nav">
        <div class="wrap">
            <ul class="orange-nav-left">
                <li><a href="/">首页</a><span>|</span></li>
                <li><a href="#">大米商城</a><span>|</span></li>
                <li><a href="#">大米澎湃OS</a><span>|</span></li>
                <li><a href="#">大米汽车</a><span>|</span></li>
                <li><a href="#">智能生活</a><span>|</span></li>
                <li><a href="#">协议规则</a></li>
            </ul>
            <ul class="orange-nav-right">
                {% if request.session.is_active %}
                    <li><a href="home">我的</a><span>|</span></li>
                    <li><a href="logout">退出</a><span>|</span></li>
                {% else %}
                    <li><a href="login">登录</a><span>|</span></li>
                    <li><a href="register">注册</a><span>|</span></li>
                {% endif %}
                <li class="cart">
                    <a href="#">
                        <img src="{% static 'images/shop.jpg' %}">
                        <i>购物车(0)</i>
                    </a>
                    <div class="cart-list">
                        购物车中还没有商品，赶快选购吧！
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--橙色导航 end-->

    <!--白色导航 start-->
    <div class="white-nav">
        <div class="wrap">
            <div class="logo">
                <img src="{% static 'images/mi.jpg' %}" alt="" class="home">
            </div>
            <div class="nav-bar">
                <ul>
                    <li><a href="#">电子产品</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">服饰</a></li>
                    <li><a href="#">美妆</a></li>
                    <li><a href="#">食品</a></li>
                    <li><a href="#">户外运动</a></li>
                    <li><a href="#">母婴用品</a></li>
                    <li><a href="#">家居生活</a></li>
                </ul>
            </div>
            <form action="/search" method="get">
                <div class="search">
                    <input type="text" name="keyword" placeholder="搜索">
                    <button type="submit"></button>
                </div>
            </form>
        </div>
    </div>
    <!--白色导航 end-->

    <!-- 商品搜索结果界面 -->
    <div class="search-results">
            <div id="product-list">
        		{% if products %}
            		<ul>
                		{% for product in products %}
                    		<li>{{ product.pname }} - {{ product.price }}</li>
                		{% endfor %}
            		</ul>
        		{% else %}
            		<p>没有找到相关产品</p>
       			{% endif %}
    		</div>
    </div>

    <!-- 页脚模块 start -->
    <div class="footer">
        <div class="wrap">
            <div class="footer-service">
                <ul>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe629;</i>
                            <span>规则协议</span>
                        </a>
                    </li>
                    <!-- 其他服务项... -->
                </ul>
            </div>
            <div class="footer-link">
                <ul>
                    <li>选购指南</li>
                    <li><a href="#">电子产品</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">服饰</a></li>
                    <li><a href="#">美妆</a></li>
                    <li><a href="#">食品</a></li>
                </ul>
                <!-- 其他链接项... -->
                <div class="footer-aside">
                    <p class="tel">123-123-5678</p>
                    <p class="time">营业时间：8:00-18:00</p>
                    <a href="#" class="kefu">人工客服</a>
                    <div class="follow">
                        关注大米:
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚模块 end -->
</body>
</html>